<nb-card size="xsmall">
  <nb-card-body>
    <div class="map">
      <div id="mapDiv" style="width:100%;height:100%;"></div>
      <div id='overlay' style="display:none"></div>
    </div>
    <div class="btn-menu">
      <ul>
        <li *ngFor="let btn of btnMenu" (click)="handleClick(btn)">
          <img src="{{btn.img}}">
          <p>
            {{btn.name}}
          </p>
        </li>
      </ul>
    </div>
    <div class="left-box" [style.display]="showList?'inline':'none' ">
      <div class="search-box">
        <div class="option_1">
          <span>典型区年份：</span>
          <p-calendar [(ngModel)]="date3" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" dateFormat="yy" [showIcon]="true"></p-calendar>
        </div>
        <div class="option_2">
          <p-tabView (onChange)="hideContent($event)">
            <p-tabPanel header="超采区监测站">
              <div class="option_3">
                <span>地区：</span>
                <select class="option_4" [(ngModel)]="selectedCity">
                  <option *ngFor="let city of cities" [value]="city.id">
                    {{city.name}}
                  </option>
                </select>
                <span>站点：</span>
                <input class="option_6" placeholder="站点名称" [(ngModel)]="stnm">
              </div>
              <div class="option_3">
                <span>类型：</span>
                <select class="option_5" [(ngModel)]="selectedType">
                  <option *ngFor="let odtype of odtypes" [value]="odtype.id">
                    {{odtype.name}}
                  </option>
                </select>
                <p-button style="width:75px;" (onClick)="search()" icon="pi pi-search" label="查询"></p-button>
              </div>

            </p-tabPanel>
            <p-tabPanel header="手绘区域选择">
            </p-tabPanel>
          </p-tabView>
        </div>
      </div>
      <div class="content-box" [style.display]="showContent?'inline':'none' ">
        <div class="chart">
          <div echarts [options]="chartOption" class="chart-box"></div>
          <div class="chart-detail">
            济南市浅层超采区共有地下水观测井2眼，本月区域平均水位8米，如上图所示近一年来水位有所提升
          </div>
        </div>
        <div class="list-box">
          <div class="list" *ngFor="let ccq of ccqInfo" (click)="mapInfo(ccq)"
               [style.background-color]="selectedCcq === ccq ? '#f5f5f5': '#fff'">
            <h1 class="">{{ccq.name}}</h1>
            <table class="tb">
              <tr>
                <td width="32%" align="right">水位/埋深：</td>
                <td>水位/埋深：{{ccq.z}}m/{{ccq.ms}}m</td>
              </tr>
              <tr>
                <td align="right">地下水类型：</td>
                <td>{{ccq.type}}</td>
              </tr>
              <tr>
                <td align="right">水文地质单元：</td>
                <td>{{ccq.unit}}</td>
              </tr>
              <tr>
                <td align="right">站址：</td>
                <td>{{ccq.stlc}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="overlay" [style.display]="showPanel?'inline':'none'">
      <div class="ol_title">
        <div class="dw">{{ol_title}}</div>
        <div class="sc" (click)="hidePanel()"></div>
      </div>
      <div class="ol_panel">
        <p-tabView>
          <p-tabPanel header="基础信息">
            <div class="tab_info">
              <div class="tl"></div>
              <div class="table_tl">
                <div class="table_sz">
                  <table id="#" class="table table-bordered ">
                    <tbody>
                    <tr class="">
                      <td>水位 / 埋深</td>
                      <td>717.55m / 80m</td>
                    </tr>
                    <tr class="">
                      <td>井深</td>
                      <td>182m</td>
                    </tr>
                    <tr class="">
                      <td>水温</td>
                      <td>15℃</td>
                    </tr>
                    <tr class="">
                      <td>水质类别</td>
                      <td>III 类</td>
                    </tr>
                    <tr class="">
                      <td>地下水类型</td>
                      <td>孔裂隙水</td>
                    </tr>
                    <tr class="">
                      <td>水文地质单元</td>
                      <td>淄博-潍坊浅层地下水超采区</td>
                    </tr>
                    <tr class="">
                      <td>站址</td>
                      <td>滨州市惠民县尧沟村</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
                <div class="tl_table">
                  <div>标准岩性图例</div>
                  <table id="" class="table table-bordered ">
                    <tbody class="bz_table">
                    <tr class="line_one">
                      <td><span>粗砂</span></td>
                      <td><span>黄土</span></td>
                      <td><span>漂石</span></td>
                    </tr>
                    <tr class="line_two">
                      <td><span>粉土</span></td>
                      <td><span>黄土状粉土</span></td>
                      <td><span>中砂</span></td>
                    </tr>
                    <tr class="line_three">
                      <td><span>粉质黏土</span></td>
                      <td><span>角砾石</span></td>
                      <td><span></span></td>
                    </tr>
                    <tr class="line_four">
                      <td><span>耕表土</span></td>
                      <td><span>卵石</span></td>
                      <td><span>水位/米</span></td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </p-tabPanel>
          <p-tabPanel header="水位(埋深)统计及趋势">
            Content 2
          </p-tabPanel>
          <p-tabPanel header="水位历史同期对比">
            Content 3
          </p-tabPanel>
          <p-tabPanel header="水位分析">
            Content 3
          </p-tabPanel>
          <p-tabPanel header="成井资料">
            Content 3
          </p-tabPanel>
          <p-tabPanel header="多媒体信息">
            Content 3
          </p-tabPanel>
        </p-tabView>
      </div>
    </div>
  </nb-card-body>
</nb-card>
